import React from 'react'
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Image,
    TouchableWithoutFeedback,
} from 'react-native'

export default class CommunityHeaderCell extends React.PureComponent {

    render() {
        return (
            <TouchableWithoutFeedback onPress={this.clickCellAction}>
                <View style={styles.container}>
                    <View style={styles.viewForLeft} >
                        <Image style={styles.icon} source={{ url: this.props.data.gameIcon }} />
                        <View style={styles.viewForNameAndTime}>
                            <Text style={styles.name}>{this.props.data.gameName}</Text>
                            <Text style={styles.time}>{this.props.data.time}</Text>
                        </View>
                    </View>
                    <TouchableOpacity onPress={this.moreAction} style={styles.btn}>
                        <Image source={require('../../img/more.png')} style={styles.btnImg} />
                    </TouchableOpacity>
                </View>
            </TouchableWithoutFeedback>
        )
    }

    clickCellAction = () => {
        // console.log('header_clickCellAction')
        this.props.clickCellAction(this.props.data)
    }

    moreAction = () => {
        // console.log('header_moreAction')
        this.props.moreAction(this.props.data)
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    viewForLeft: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    icon: {
        marginLeft: 10,
        width: 40,
        height: 40,
        borderRadius: 20,
    },
    viewForNameAndTime: {
        marginLeft: 10,
        flexDirection: 'column',
        justifyContent: 'space-between'
    },
    name: {
        color: 'rgba(184, 136, 100, 1)',
        fontSize: 14,
    },
    time: {
        color: '#999999',
        fontSize: 12,
    },
    btn: {
        width: 50,
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
    },
    btnImg: {
        width: 15,
        height: 15,
    }
})